<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>豆瓣音乐</title>
    <link rel="stylesheet" href="./css/douban.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="wrapper">
        <div class="nav">
            <div class="left-nav">
                <ul>
                    <li>豆瓣</li>
                    <li>读书</li>
                    <li>电影</li>
                    <li>音乐</li>
                    <li>同城</li>
                    <li>小组</li>
                    <li>阅读</li>
                    <li>FM</li>
                    <li>时间</li>
                    <li>豆品</li>
                    <li>更多</li>
                </ul>
            </div>
            <div class="right-nav">
                <ul>
                    <li>下载豆瓣客户端</li>
                    <li>登录/注册</li>
                </ul>
            </div>
        </div>
        <div class="header">
            <div class="search">
                <div class="primary">
                    <div class="logo">
                        <img src="./image/logo.png" alt="">
                    </div>
                    <form action="" id="form">
                        <input type="text" class="text" placeholder="唱片名、表演者、条码、ISRC">
                        <input type="submit" class="submit" value="搜索">
                    </form>
                    <ul class="search-list">
                        <!-- <li>
                            <a href="">
                                <img src="image/advertising-1.jpg" alt="">
                                <div class="title">
                                    <em>阴天王国</em>
                                    <p>表演者：不优雅先生</p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="image/advertising-1.jpg" alt="">
                                <div class="title">
                                    <em>爱情风华</em>
                                    <p>表演者：林海</p>
                                </div>
                            </a>
                        </li> -->
                    </ul>
                </div>
            </div>
            <div class="list">
                <ul>
                    <li><a href="#">音乐人</a></li>
                    <li><a href="#">潮潮豆瓣音乐周</a></li>
                    <li><a href="#">金羊毛计划</a></li>
                    <li><a href="#">专题</a></li>
                    <li><a href="#">排行榜</a></li>
                    <li><a href="#">分类浏览</a></li>
                    <li><a href="#">乐评</a></li>
                    <li><a href="#">豆瓣FM</a></li>
                    <li><a href="#">歌单</a></li>
                    <li><a href="#">2018年度榜单</a></li>
                    <li><a href="#">阿比鹿音乐奖</a></li>
                </ul>
            </div>
        </div>
        <div id="swiper"></div>
        <div class="global">
            <a href="#">
                <img src="./image/advertising-1.jpg" alt="">
            </a>
        </div>
        <div class="global-tab">
            <ul class="top-tab">
                <li class="active-tab">本周流行音乐人</li>
            </ul>
            <div class="tab-con">
                <div class="content">
                    <div class="con-img">
                        <img src="image/img/009.png" alt="">
                    </div>
                    <a href="#">放肆的肆</a>
                    <p>流行Pop</p>
                </div>
                <div class="content">
                    <div class="con-img">
                        <img src="image/img/010.png" alt="">
                    </div>
                    <a href="#">Club 8</a>
                    <p>流行Pop</p>
                </div>
                <div class="content">
                    <div class="con-img">
                        <img src="image/img/011.png" alt="">
                    </div>
                    <a href="#">TV dog乐队</a>
                    <p>摇滚Rock</p>
                </div>
                <div class="content">
                    <div class="con-img">
                        <img src="image/img/012.png" alt="">
                    </div>
                    <a href="#">卡列宁</a>
                    <p>流行Pop</p>
                </div>
                <div class="content">
                    <div class="con-img">
                        <img src="image/img/013.png" alt="">
                    </div>
                    <a href="#">pentatonic</a>
                    <p>摇滚Rock</p>
                </div>
                <div class="content">
                    <div class="con-img">
                        <img src="image/img/014.png" alt="">
                    </div>
                    <a href="#">郁林</a>
                    <p>民谣Folk</p>
                </div>
                <div class="content">
                    <div class="con-img">
                        <img src="image/img/015.png" alt="">
                    </div>
                    <a href="#">Phigma</a>
                    <p>世界音乐World</p>
                </div>
                <div class="content">
                    <div class="con-img">
                        <img src="image/img/016.png" alt="">
                    </div>
                    <a href="#">AirS</a>
                    <p>流行Pop</p>
                </div>
            </div>
        </div>
        <div class="join">
            <div class="join-block">
                <h2>
                    <a href="#">44764</a>
                </h2>
                <p>音乐人</p>
            </div>
            <div class="join-block">
                <h2>
                    <a href="#">2661</a>
                </h2>
                <p>播客</p>
            </div>
            <div class="join-block">
                <h2>
                    <a href="#">1118</a>
                </h2>
                <p>厂牌</p>
            </div>
            <div class="button">
                <a href="#">我要加入</a>
            </div>
        </div>
        <div class="tag-header">
            <p>热门音乐人分类</p>
        </div>
        <div class="tag-more">
            <a href="#">更多</a>
        </div>
        <table>
            <tbody>
                <tr>
                    <th>流行</th>
                    <td>轻音乐</td>
                </tr>
                <tr>
                    <th>摇滚</th>
                    <td>古典</td>
                </tr>
                <tr>
                    <th>电子</th>
                    <td>世界音乐</td>
                </tr>
                <tr>
                    <th>民谣</th>
                    <td>说唱</td>
                </tr>
                <tr>
                    <th>爵士</th>
                    <td>原声</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="./js/jquery.js"></script>
    <script src="./js/index.js"></script>
    <script src="./js/dbindex.js"></script>
    <script src="./js/douban.js"></script>
    <script>
        $('#swiper').sliderImg({
            image: ['image/banner-2723.jpg', 'image/banner-2727.jpg', 'image/banner-2729.jpg', 'image/banner-2732.jpg', 'image/banner-2732.jpg', 'image/banner-2733.jpg', 'image/banner-2734.jpg', 'image/banner-2736.jpg', 'image/banner-2737.jpg', 'image/banner-2738.jpg', 'image/banner-2739.jpg']
        });
    </script>
</body>

</html>